import QtQuick 2.0
import QtQuick.Controls 2.12

import "../../../basic"

Item {
    anchors.left: parent.left
    anchors.right: parent.right
    height: 320
    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        onEntered: {
            leftIniImg.visible = true
            rightIniImg.visible = true
        }
        onExited: {
            leftIniImg.visible = false
            rightIniImg.visible = false
        }
    }
    Label {
        id: titleLabel
        text: qsTr("官方歌单>")
        font.bold: true
        color: "white"
        font.family: BasicConfig.commFont
        font.pixelSize: 24
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.topMargin: -20
        anchors.leftMargin: 40
    }
    Item {
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.top: titleLabel.bottom
        anchors.topMargin: 10
        height: parent.height - titleLabel.height
        Image {
            id: leftIniImg
            visible: false
//                        enabled: false
            anchors.left: parent.left
            anchors.top: parent.top
            anchors.topMargin: 100
            source: "qrc:/img/Resources/cherryPick/leftArrow.png"
            width: 50
            height: 100
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    slideToAni.start()
                }
            }
        }
        Image {
            id: rightIniImg
//                        mirror: true    // 实现水平镜像
            visible: false
            anchors.right: parent.right
            anchors.top: leftIniImg.top
            source: "qrc:/img/Resources/cherryPick/rightArrow.png"
            width: 50
            height: 100
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    slideToAni.start()
                }
            }
        }
        NumberAnimation {
            id: slideToAni
            target: singerRep
            property: "x"
            duration: 500
            easing.type: Easing.InOutQuad
            from: singerRep.x < 0 ? -250 : singerRep.x
            to: singerRep.x < 0 ? 0 : -250
            alwaysRunToEnd: true
            onStopped: {
                rightIniImg.enabled = singerRep.x === 0
                leftIniImg.enabled = !rightIniImg.enabled
            }
        }
        Item {
            id: singerRect
            anchors.left: parent.left
            anchors.right: rightIniImg.left
            anchors.leftMargin: 55
            clip: true
            height: 300
            MouseArea {
                anchors.fill: parent
                hoverEnabled: true
                onEntered: {
                    leftIniImg.visible = true
                    rightIniImg.visible = true
                }
                onExited: {
                    leftIniImg.visible = false
                    rightIniImg.visible = false
                }
            }
            Row {
                id: singerRep
                width: parent.width
                height: parent.height
                spacing: 20
                Repeater {
                    model: ListModel {
                        id: singDetailModel
                        ListElement { src: "qrc:/img/Resources/cherryPick/officalSing/pic1.png";gColor:"#ff937b5f";titleText:"标题1";sing1:"数据1";sing2:"数据2";sing3:"数据3"; }
                        ListElement { src: "qrc:/img/Resources/cherryPick/officalSing/pic2.png";gColor:"#ff7c6362";titleText:"标题2";sing1:"数据1";sing2:"数据2";sing3:"数据3"; }
                        ListElement { src: "qrc:/img/Resources/cherryPick/officalSing/pic3.png";gColor:"#ff468c9c";titleText:"标题3";sing1:"数据1";sing2:"数据2";sing3:"数据3"; }
                        ListElement { src: "qrc:/img/Resources/cherryPick/officalSing/pic4.png";gColor:"#ff31588d";titleText:"标题4";sing1:"数据1";sing2:"数据2";sing3:"数据3"; }
                        ListElement { src: "qrc:/img/Resources/cherryPick/officalSing/pic5.png";gColor:"#ff912d44";titleText:"标题5";sing1:"数据1";sing2:"数据2";sing3:"数据3"; }
                        ListElement { src: "qrc:/img/Resources/cherryPick/officalSing/pic6.png";gColor:"#ff4763a9";titleText:"标题6";sing1:"数据1";sing2:"数据2";sing3:"数据3"; }
                    }
                    delegate: Rectangle {
                        id: root
                        height: width + 80
                        radius: 10
                        width: 222
                        color: gColor
                        MouseArea {
                            anchors.fill: parent
                            hoverEnabled: true
                            onEntered: {
                                playImg.visible = true
                                bottomRect.endColor = bottomRect.endColor.replace("ff", "00")
                                showAni.start()
                                leftIniImg.visible = true
                                rightIniImg.visible = true
                            }
                            onExited: {
                                playImg.visible = false
                                closeAni.start()
                                leftIniImg.visible = false
                                rightIniImg.visible = false
                            }
                        }
                        NumberAnimation {
                            id: showAni
                            target: bottomRect
                            property: "height"
                            duration: 200
                            from: 80
                            to: 300
                            easing.type: Easing.InOutQuad
                            onStarted: {
                                singsCol.visible = true
                                titLabel.anchors.bottomMargin = 50
                            }
                        }
                        NumberAnimation {
                            id: closeAni
                            target: bottomRect
                            property: "height"
                            duration: 200
                            from: 300
                            to: 80
                            easing.type: Easing.InOutQuad
                            onStarted: {
                                singsCol.visible = false
                                titLabel.anchors.bottomMargin = -50
                            }
                            onStopped: {
                                bottomRect.endColor = gColor
                            }
                        }

                        Rectangle {
                            id: imgRect
                            clip: true
                            width: parent.width
                            height: parent.height
                            radius: 10
                            anchors.top: parent.top
                            anchors.left: parent.left
                            anchors.right: parent.right
                            Image {
                                anchors.fill: parent
                                source: src
                            }
                        }
                        Rectangle {
                            id: bottomRect
                            anchors.bottom: parent.bottom
                            anchors.left: parent.left
                            anchors.right: parent.right
                            height: parent.height - imgRect.height
                            property string startColor: gColor
                            property string endColor: gColor
                            gradient: Gradient {
                                GradientStop {
                                    position: 0.8
                                    color: bottomRect.startColor
                                }
                                GradientStop {
                                    position: 0
                                    color: bottomRect.endColor
                                }
                            }
                            Image {
                                id: playImg
                                visible: false
                                anchors.right: parent.right
                                anchors.rightMargin: 10
                                anchors.bottom: parent.bottom
                                anchors.bottomMargin: 10
                                source: "qrc:/img/Resources/cherryPick/officalSing/play.png"
                                width: 80
                                height: width
                            }
                            Label {
                                id: titLabel
                                font.pixelSize: 15
                                color: "white"
                                width: parent.width - 80
                                font.bold: true
                                font.family: BasicConfig.commFont
                                text: titleText
                                wrapMode: Text.WordWrap // 尾部以单词为单位换行
                                anchors.left: parent.left
                                anchors.leftMargin: 10
                                anchors.bottom: singsCol.top
                                anchors.bottomMargin: -50
                            }
                            Column {
                                id: singsCol
                                anchors.left: titLabel.left
                                anchors.right: titLabel.right
                                anchors.bottom: parent.bottom
                                anchors.bottomMargin: 10
                                spacing: 5
                                visible: false
                                Label {
                                    text: sing1
                                    font.pixelSize: 12
                                    color: "white"
                                    font.family: BasicConfig.commFont
                                }
                                Label {
                                    text: sing2
                                    font.pixelSize: 12
                                    color: "white"
                                    font.family: BasicConfig.commFont
                                }
                                Label {
                                    text: sing3
                                    font.pixelSize: 12
                                    color: "white"
                                    font.family: BasicConfig.commFont
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

